/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<image :src="imgUrl+'user/bg-panel-sign.jpg'" style="width:100%;" role="img"></image>
		<view class="header padding header-month">
			<view class="justify-content">
				<view class="header-left">
					<view class="txs_fix">
						<image class="head-image" mode="aspectFill" :src="userInfo.head_pic?userInfo.head_pic:defaultImg"
						 role="img"></image>
					</view>
					<view class="header-left-text text-color">{{userInfo.nickname}}</view>
				</view>
				<view class="header-right">
					<view class="header-left-text text-color">本月已获 : {{signInfo.month_point||0}}分</view>
					<view class="header-left-text text-color">累计总积分 : {{signInfo.total_point||0}}分</view>
				</view>
			</view>
			<image class="header-sing-img" v-if="show_sign" @tap.stop='clickSign' :src="imgUrl+'user/sign.png'" style="background-position-x:isSign">
			</image>
			<block v-else>
				<image @tap.stop="clickSign"  class="header-sing-img" :src="imgUrl+'user/is_sign.png'" style="background-position-x:isSign" role="img">
					<!--连续签到一直奖励150积分  断签100 -->
					<text class="header-sing-text" v-if="signInfo.consecutive_days>=configInfo.sign_sign_signcount">
						+{{configInfo.sign_sign_award}}积分
					</text>
					<text class="header-sing-text" v-if="signInfo.consecutive_days<configInfo.sign_sign_signcount">
						+{{configInfo.sign_sign_integral}}积分
					</text>
				</image>
			</block>
			

			<view class="header-broder">本月已连续签到{{signInfo.consecutive_days||0}}天,连续签到{{configInfo.sign_sign_signcount}}天即得{{configInfo.sign_sign_award}}积分</view>
		</view>
		<view class="no-data">
			<view class="no-data-title center-year">{{year}}年{{month}}月签到</view>
			<view class="space-around">
				<block v-for="(item,index) in weekDay" :key="index">
					<view>{{item}}</view>
				</block>
			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in oneWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>

			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in twoWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>

			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in threeWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>

			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in fourWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>


			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in fiveWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>
			</view>
			<view class="space-around space-around-day">
				<block v-for="(item,index) in sixWeek" :key="index">
					<view :style="{color: item.day == item.selected?'red':''}">{{item.day}}</view>
				</block>
			</view>
		</view>
		<view class="foot">
			<view>签到规则:</view>
			<view>1.用户每日签到可获取积分奖励，连续签到相应天数可额外获得积分奖励；</view>
			<view>2.签到送积分活动长期有效；</view>
			<view>3.本活动最终解释权归{{store_name}}商家所有。</view>
		</view>
		<view @tap.stop="back" class="core">返回个人中心</view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {getUserInfo,getConfig,getSign,postSign} from "@/api/api.js";
	import {mapState,mapActions} from "vuex";
	export default {
		data() {
			return {
				defaultImg:config.imgUrl+'common/user68.jpg',
				imgUrl:config.imgUrl,
				store_name:config.appName,
				userInfo:"",//用户信息
				configInfo:'',//config 信息
				signInfo:"",//积分信息
				sign:false,
				isSign: 0,//background-position 参数
				show_sign: true,
				year: "",
				month: "",
				day: "",
				dayArr: "",
				weekDay: ["日", "一", "二", "三", "四", "五", "六"],
				oneWeek: [],
				twoWeek: [],
				threeWeek: [],
				fourWeek: [],
				fiveWeek: [],
				sixWeek: [],
			};
		},
		onLoad(options) {
			var that = this;
			var date = new Date();
			var days = [];
			var thisMon = date.getMonth(); //当前月份
			var thisDay = date.getDate(); //当前天
			if (0 <= thisMon && thisMon < 9) {
				thisMon = "0" + (thisMon + 1)
			} else {
				thisMon = (thisMon + 1)
			}

			var totalDay = this.mGetDate(date.getFullYear(), thisMon);
			for (let i = 1; i <= totalDay; i++) {
				// if (0 <= i && i < 10) {
				//     i = "0" + i;
				// }
				days.push({
					day: i,
					selected: -1
				})
				
			}
			that.dayArr=days;
			that.month=thisMon;
			that.day=thisDay;
			that.year=date.getFullYear();
			var firstDay = that.year + "/" + that.month + "/" + 1; //获取每个月的第一天
			var weekDay = that.weekDay;
			var day = weekDay[new Date(firstDay).getDay()]; //判断每月第一天是星期几
			console.log(day)
			var appendNum = that.addDay(day);
			if (appendNum > 0) {
				// console.log(this.dayArr)
				for (let i = 0; i < appendNum; i++) {
					// console.log(i)
					that.dayArr.unshift('')
					// console.log(that.dayArr)
				}
			}
			
			that.userInfo=this.user
			that.configInfo=this.config
			
		},
		computed: {
			...mapState(['hasLogin','user','config'])
		},
		onShow(){
			var that=this;
			// this.params.prom_type=6;
			if(that.hasLogin){
				that.getData()
				that.getUser()
				that.getConfig()
			}else{
			
				common.toast("none","请登录",2000)
				
			}
			
		},
		methods: {
			...mapActions(['getUser','getConfig']),
			/*配置信息*/
			/*签到*/ 
			postSign(){
				postSign().then(res=>{
					console.log(res)
					if(res.status!=1){
						return common.model(res.msg)
					}
					if(res.status==1){
						// this.show_sign=true;
						this.getSign()
						common.toast("none","签到成功",2000)
					}
					
						
				})
			},
			/*会员签到统计*/ 
			getSign(){
				getSign().then(res=>{
					console.log(res)
					if(res){
						var that=this;
						that.signInfo=res;
						
						var arr=res.sign_time.split(",")
						var str=[];
						
						arr.forEach((i,index)=>{
							
							str.push(i.slice(-2))
						})
						console.log(arr)
						for(var i=0;i<that.dayArr.length;i++){
							for(var j=0;j<str.length;j++){
								
								if(that.dayArr[i].day==str[j]){
									
									if(str[j].indexOf(that.day.toString())!=-1){
										that.show_sign=false;
										console.log(11,that.show_sign)
									}
									console.log(that.dayArr[i].day)
									that.dayArr[i].selected=str[j];
								}
								
								
							}
						}
						
					}
				})
			},
			getData: function() {
				var that = this;
				// console.log(that.dayArr)
				that.getSign()
				that.show();
			},
			show: function() {
				var that = this;
				for (let y = 0; y < 7; y++) {
					that.oneWeek.push(that.dayArr[y])
				}
				for (let u = 7; u < 14; u++) {
					that.twoWeek.push(that.dayArr[u])
				}
				for (let g = 14; g < 21; g++) {
					that.threeWeek.push(that.dayArr[g])
				}
				for (let t = 21; t < 28; t++) {
					that.fourWeek.push(that.dayArr[t])
				}
				for (let k = 28; k < 35; k++) {
					if (that.dayArr[k]) {
						that.fiveWeek.push(that.dayArr[k])
					}
				}

				if (that.dayArr.length - 28 > 0) {
					for (let h = 35; h < that.dayArr.length; h++) {
						that.sixWeek.push(that.dayArr[h])
					}
					that.sixWeek = that.sixWeek;
				}
				that.oneWeek = that.oneWeek;
				that.twoWeek = that.twoWeek;
				that.threeWeek = that.threeWeek;
				that.fourWeek = that.fourWeek;
				that.fiveWeek = that.fiveWeek;
				that.sixWeek = that.sixWeek;
				// that.store_name=

			},
			addDay(e) {
				switch (e) {
					case '一':
						return 1;
					case '二':
						return 2;
					case '三':
						return 3;
					case '四':
						return 4;
					case '五':
						return 5;
					case '六':
						return 6;
					default:
						return 0;
				}
			},
			/*点击签到*/ 
			clickSign(){
				if(this.show_sign){
					if(this.hasLogin){
						this.postSign()
					}else{
						common.toast("none","请登录",2000)
					}
					
				}else{
					common.toast("none","今日已签到",2000)
					
					
				}
				
			},
			mGetDate(year, month) {
				var d = new Date(year, month, 0);
				return d.getDate();
			},
			/*返回个人中心*/
			back(){
				
				uni.switchTab({
					url:'/pages/user/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.text-color {
		color: #fff;
	}

	.padding {
		padding: 10px;
	}

	.txs_fix {
		width: 40px;
		height: 40px;
		border-radius: 18px;
		overflow: hidden;
	}

	.header .head-image {
		width: 100%;
		height: 100%;
	}

	.header-left {
		display: flex;
	}

	.header-left-text {
		font-size: 0.7rem;
		margin-top: 25rpx;
		margin-left: 10px;
	}

	.header-right {
		line-height: 16rpx;
	}

	.header-broder {
		text-align: center;
		color: #fff;
		font-size: 0.65rem;
		position: absolute;
		top: 280rpx;
		width: 100%;
		/*  #ifdef  H5 */
		font-size: 28rpx;
		top: 328rpx;
		/*  #endif  */

	}

	.header-sing-img {
		position: absolute;
		top: 2.765333rem;
		left: 50%;
		margin-left: -2.133333rem;
		width: 4.966666rem;
		height: 4.966666rem;
		background-size: 8.533332rem 4.266666rem;
		background-position-x: -4.266666rem;
	}

	.header-sing-text {
		position: absolute;
		top: 179rpx;
		/*  #ifdef  H5 */
		
		top: 214rpx;
		/*  #endif  */
		left: 10rpx;
		width: 100%;
		text-align: center;
		font-size: .63rem;
		color: red;
	}


	.justify-content {
		justify-content: space-between;
		display: flex;
	}

	.space-around {
		display: flex;
	}

	.space-around view {
		width: 14%;
	}

	.space-around-day {
		color: darkgray;
	}

	.center-year {
		border-bottom: 1px solid #f3f3f3;
		padding: 8px;
		color: red;
	}

	.foot {
		font-size: 0.75rem;
		line-height: 1.35rem;
		padding: 10px;

	}

	.core {
		text-align: center;
		color: #fff;
		background-color: #ff3b3b;
		border-radius: 10px;
		margin: 16rpx 24rpx;
		height: 90rpx;
		line-height: 90rpx
	}

	.header-month {
		position: absolute;
		top: 10px;
		width: 95%;
	}
</style>
